<template>
    <div class="filters">
        <el-row type="flex" class="filters-top" justify="space-between" align="middle">
            <el-col :span="8">
                单程： 
            {{data.info.departCity}} - {{data.info.destCity}} 
                / 
               {{data.info.departDate}}
            </el-col>
            <el-col :span="4">
                <el-select size="mini" v-model="airport" placeholder="起飞机场">
                    <el-option
                    v-for="(item,index) in data.options.airport"
                    :key="index"
                    :label="item"
                    :value="item"
                    >
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-select size="mini" v-model="flightTimes"  placeholder="起飞时间">
                    <el-option
                    v-for="(item,index) in data.options.flightTimes"
                    :key="index"
                    :label="`${item.from}:00 - ${item.to}:00`"
                    :value="`${item.from},${item.to}`"
                    >
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-select size="mini" v-model="company"  placeholder="航空公司">
                    <el-option
                    v-for="(item,index) in data.options.company"
                    :key="index"
                    :label="item"
                    :value="item">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-select size="mini" v-model="airSize" placeholder="机型" >
                    <el-option
                     v-for="(item,index) in airSizeList"
                    :key="index"
                    :label="item.label"
                    :value="item.size">
                    </el-option>
                </el-select>
            </el-col>
        </el-row> 
        <div class="filter-cancel">
            筛选：
            <el-button 
                       type="primary" 
                       round 
                       plain 
                       size="mini" 
                       @click="handleFiltersCancel">
                撤销
    		</el-button>
        </div>
        <span v-show="false">{{handleChange}} </span>
    </div>
</template>

<script>
export default {
    data(){
        return {
            airport: "",        // 机场
            flightTimes: "",    // 出发时间
            company: "",        // 航空公司
            airSize:"",        // 机型大小
            airSizeList: [     // 机型大小数组
                {
                    label:"大",
                    size:"L"
                },
                {
                    label:"中",
                    size:"M"
                },
                {
                    label:"小",
                    size:"S"
                }
            ],
            flightsList:[]  //渲染页面的数据列表
        }
    },
    props:{
        data:{
            type:Object,
            default:{}
        }
    },
    computed:{
        handleChange(){  
            const [start,end]=this.flightTimes.split(',') 
            let arr= this.data.flights.filter(v=>{
                let isShow=true;//假设列表中所有数据都符合条件
                const current= +v.dep_time.split(':')[0];//把出发时间分割成数组
                // 排除不符合条件的数据
                // 机场数据有的时候而且列表中机场数据与选中的机场数据不相等的时候
                if(this.airport &&  this.airport!=v.org_airport_name ||
                    this.flightTimes && !(+start<=current && current < +end) ||
                    this.company && this.company!=v.airline_name ||
                    this.airSize && this.airSize != v.plane_size
                  ){
                    isShow=false
                }
                return isShow
            })
            // 给父组件
            this.$emit('setDataList',arr)
        }
    },
    methods: {
      
        
        // 撤销条件时候触发
        handleFiltersCancel(){
            this.airport = "";
            this.flightTimes = "";
            this.company = "";
            this.airSize = "";
            this.$emit('setDataList',this.data.flights)
        },
    }
}
</script>

<style scoped lang="less">
    .filters{
        margin-bottom:20px;
    }

    .filters-top{
        > div{
            /deep/ .el-select{
                margin-left:10px;
            }
        }
    }

    .filter-cancel{
        margin-top:10px;
    }
</style>